<template>
  <div class="container">
    <div class="login">
      <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/login_bgd@2x.png" alt>
       <div class="learn">
      <!-- <view class="form-item" style="margin-top:55%;"> -->
        <div class="latae">
        <div class="form-item-bd" style="display: flex;margin-bottom:20px;margin-right:10%;margin-left:10%;background-color:#F7F9FA;border-radius:25px;">
           <image class="tub" :src='searchicon' />
          <input type="text" placeholder-class="input-placeholder" name="name" @keyup.13="submitForm()" v-model="ruleForm2.loginID" placeholder="手机号" style="flex:1;height:77rpx;"  />
        </div>
        <div class="form-item-bd" style="background-color:#F7F9FA;border-radius:25px;display: flex;margin-bottom:10px;margin-bottom:54px;margin-right:10%;margin-left:10%;">
          <image class="tub" :src='searchicons' />
          <input type="password" placeholder-class="input-placeholder" name="name" v-model="ruleForm2.password" placeholder="密码"  style="flex:1;height:77rpx"/>
        </div>
        <div style="margin-left:10%;margin-right:10%;">
          <button open-type="getUserInfo" @getuserinfo="getUserInfo" form-type='submit' type="primary" class="buttim" style="border-radius:25px;width:100%;" >登陆</button>
        </div>
        </div>
      <!-- </view> -->
      </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm2: {
        loginID: '',
        password: ''
      },
      searchicon: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/login_tel@2x.png',
      searchicons: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/login_pwd@2x.png'
    }
  },
  onLoad: function () {
      if(wx.getStorageSync('openid')!='null'){

    if (wx.getStorageSync('loginInfo')){

        this.ruleForm2 =wx.getStorageSync('loginInfo')

      if (wx.getStorageSync('doneLogin')){
        // this.getUserInfo();
        this.todo();
      }
    }
      }else{
        // this.getUserInfo();
         this.getCode();
      }
  },
  methods: {
    getUserInfo (e) {
      if (!this.ruleForm2.loginID && !this.ruleForm2.password) {
        wx.showToast({

        title: '手机号不能为空！',
        icon: 'none',
        duration: 1000
      })
      } else if (!this.ruleForm2.loginID) {

        wx.showToast({
        title: '手机号不能为空！',
        icon: 'none',
        duration: 500
      })
      } else if (!this.ruleForm2.password) {
        wx.showToast({
        title: '密码不能为空！',
        icon: 'none',
        duration: 500
      })
      } else {
       wx.showLoading({
      title:"加载中...",
      icon:"loading",
      duration:10000
    })
        this.getCode();
      }

    },
    getCode() {
      // 在mpvue中,提供了一个全局小程序对象 wx
      wx.login({
        success: res => {
          this.getOpenid(res.code);

        }
      });
    },
    getOpenid(code) {
      var that = this
      // 三个参数 appid secret code
      const appid = "wxba90e9098b4969bd";
      const secret = "e38533a092675a51bc42d444b8c07c34";

      wx.request({
          url: this.$interfaces.getOpenid  + appid + "/" + secret + "/" + code,
          method: "get",
            success: function (res) {
              wx.setStorageSync('openid', res.data.data.openid)
                that.$store.dispatch("setOpenId", res.data.data.openid);
              wx.setStorageSync("token", res.cookies[0].split("=")[1].split(";")[0])
                that.todo();
            }
        })
        // .then(res => {
        //   // console.log(res);
        //   // 将openid存储到vuex中
        //   this.$store.dispatch("setOpenId", res.data.openid);
        //   // console.log(this.$store.getters.openId)
        //   // 请求课程数据
        //   // this.isLearned(res.openid);
        //   that.todo();
        // })
        // .catch(err => console.log(err));
    },
    todo:function(){
      var that = this
        const phonenum= this.ruleForm2.loginID;
       const password= this.ruleForm2.password;
    wx.request({
      url: this.$interfaces.login+"/"+phonenum+"/"+password,
      method: 'get',
      success: function (res) {
        if (res.data.error == "0") {
          wx.setStorageSync('loginInfo', that.ruleForm2) // 存储登录的用户账号信息
          wx.setStorageSync('loginUserInfo', res.data.data) // 存储登录后获取的用户详细信息
          wx.setStorageSync("doneLogin", true)

    //       //跳转
          wx.switchTab({
          url: '/pages/index/main'
        })

          wx.hideLoading()
        } else {
          // 账号密码错误或登录过期，请重新登录
          wx.hideLoading()
          wx.showModal({
            title: '提示',
            content: '账号密码错误或登录过期，请重新登录',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else {
                console.log('用户点击取消')
              }
            }
          })
        }
      }
    });
  }
  }
}
</script>

<style>
.form-item{
  position: absolute;
}
.input-wrap {
  position: relative;
  margin: 20rpx 10rpx 0 10rpx;
}
.tips {
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 0;
  transform: translate(0, -50%);
  -webkit-transform: -webkit-translate(0, -50%);
  z-index: 100;
}
.clear-wrap {
  display: flex;
  width: 40rpx;
  height: 104rpx;
  align-items: center;
  justify-content: flex-end;
}
.warn-tip {
  line-height: 104rpx;
  font-size: 28rpx;
  color: #ff5777;
}
.icon-user{
  position: absolute;
  left: 0;
  z-index:5;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/icon_boss_fill.png); /*引入图片图片*/
  background-repeat: no-repeat; /*设置图片不重复*/
  background-position: 0px 0px; /*图片显示的位置*/
  width: 20px; /*设置图片显示的宽*/
  height: 20px; /*图片显示的高*/

}
.tub{
  width: 39rpx; /*设置图片显示的宽*/
  height: 42rpx; /*图片显示的高*/
  margin-right: 10rpx;
  margin-top:17rpx;
  margin-right:10rpx;
margin-left:10rpx;

}
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login {
  width: 100%;
  height: 100%;
  position: relative;
}
.login img {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.login .learn {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  top: 0;
  left: 0;
}
.learn button {
  position: absolute;
  top: 90%;
  left: 10%;
  width: 80%;
  background-color: #009eef;
  color: white;
}
.latae {
  padding-bottom:50rpx;
background-color:#ffffff;
margin-left:30rpx;
margin-right:30rpx;
padding-top:50rpx;
margin-top:40%;
border-radius: 5px;
box-shadow: #eeeeee 2px 5px 5px;

}
.buttim{
  position: relative !important;
  left:0% !important;
}
</style>
